<template>
  <view class="container">
    <!-- 顶部信息栏（同一行布局） -->
    <view class="fixed-header">
      <Header :header-data="headerData" />
    </view>

    <!-- Tab 切换 -->
    <view class="tab-bar">
      <view v-for="(tab, index) in tabList" :key="index" class="tab-item" :class="{ active: activeTab === index }"
        @click="changeTab(index)">
        {{ tab }}
      </view>
    </view>

    <!-- 筛选栏（调整顺序：全部/进行中/已读/未读） -->
    <view class="filter-bar">
      <view v-for="(filter, idx) in filterList" :key="idx" class="filter-item" :class="{ active: activeFilter === idx }"
        @click="changeFilter(idx)">
        {{ filter.text }}
        <view v-if="filter.badge" class="badge">{{ filter.badge }}</view>
      </view>
    </view>

    <!-- 列表区域 -->
    <view class="list">
      <!-- 列表项 -->
      <view v-for="(item, i) in list" :key="i" class="list-item">
        <!-- 状态+标题同行布局 -->
        <view class="status-title-row">
          <view v-if="item.status" class="status-tag">{{ item.status }}</view>
          <image class="status-image" :src="getFullImageUrl(item.statusImage)"></image>
          <view class="item-title">{{ item.title }}</view>
        </view>

        <!-- 人员信息标签化 -->
        <view class="info-tags">
          <view class="info-tag">{{ item.peopleInfo }}</view>
          <view class="info-tag">{{ item.person_req }}</view>
          <view class="info-tag">{{ item.time }}</view>
        </view>

        <!-- 技能标签 -->
        <view class="skill-tag" v-if="item.skill">{{ item.skill }}</view>

        <!-- 雇主信息栏 -->
        <view class="employer-bar">
          <!-- 私聊区域容器 -->
          <view class="private-chat-container">
            <view v-if="Array.isArray(item.employer) && item.employer.length > 0" class="employer-group">
              <view v-for="(emp, empIdx) in item.employer" :key="empIdx" class="employer-item"
                style="margin-top: 20rpx;">
                <image class="employer-avatar" :src="emp.avatar"></image>
                <view class="employer-info">
                  <view class="employer-name">
                    <text class="employer-tag"><text class="employer-tag-text">雇友</text></text>
                    <text class="nickname">{{ emp.nickname }}</text>
                    <view v-if="emp.unread" class="unread-badge">{{ emp.unread }}</view>
                  </view>
                  <view class="last-msg" v-if="emp.lastMsg">{{ emp.lastMsg }}</view>
                </view>
                <view class="chat-btn" @click="handleChats(item, emp)">聊一聊</view>
              </view>
            </view>
            <view v-else-if="item.employer && item.employer.nickname" class="employer-item">
              <image class="employer-avatar" :src="item.employer.avatar"></image>
              <view class="employer-info">
                <view class="employer-name">
                  <text class="employer-tag"><text class="employer-tag-text">雇主</text></text>
                  <text class="nickname">{{ item.employer.nickname }}</text>
                  <view v-if="item.employer.unread" class="unread-badge">{{ item.employer.unread }}</view>
                </view>
                <view class="last-msg" v-if="item.employer.lastMsg">{{ item.employer.lastMsg }}</view>
              </view>
              <view class="chat-btn" @click="handleChat(item)">聊一聊</view>
            </view>
            <view v-else-if="!item.room_id" class="no-chat-person">
              <view class="no-chat-icon"></view>
              <text class="no-chat-text">暂无聊天人员</text>
            </view>
          </view>

          <!-- 群聊区域（显示在底部） -->
          <view v-if="item.room_id && item.member_avatars && item.member_avatars.length > 0"
            class="group-chat-container">
            <view class="group-chat-item">
              <view class="group-avatars">
                <image v-for="(avatar, idx) in item.member_avatars.slice(0, 4)" :key="idx" :src="avatar"
                  class="group-avatar"></image>
                <view v-if="item.member_avatars.length > 4" class="more-avatar">+{{ item.member_avatars.length - 4 }}
                </view>
              </view>
              <view class="group-info">
                <view class="group-name">
                  <text class="group-tag"><text class="group-tag-text">群聊</text></text>
                  <text class="group-title">{{ item && item.member_nicknames && Array.isArray(item.member_nicknames) &&
                    item.member_nicknames.length > 0 ? item.member_nicknames.join('、') : item.title || '群聊' }}</text>
                  <view v-if="item.group_unread" class="unread-badge">{{ item.group_unread }}</view>
                </view>
                <view class="last-msg">{{ item.group_lastMsg || '暂无消息' }}</view>
              </view>
              <view class="chat-btn" @click="handleGroupChat(item)">聊一聊</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 空数据提示 -->
      <view v-if="list.length === 0" class="empty-container">
        <view class="empty-icon">📭</view>
        <text class="empty-text">暂无数据</text>
      </view>

      <!-- 加载提示 -->
      <view class="load-more" v-if="hasMore && list.length > 0">加载中...</view>
      <view class="load-more" v-if="!hasMore && list.length > 0">没有更多数据了</view>
    </view>
  </view>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
